<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-04-18 14:38:36
 * @LastEditors: 陈波
 * @LastEditTime: 2024-04-23 19:32:27
 * @Description: 
 * @FilePath: \graDesign\src\views\DataBigScreen\TD3\components\3D\AccuracyNoLstm.vue
-->
<template>
  <BasicCard 
    title="Accuracy_NoLSTM-3D" 
    v-loading="isLoading"
    element-loading-text="正在加载中..."
    element-loading-background="rgba(0, 0, 0, 0.15)"
  >
    <BasicCharts 
      :option="option"
      :carouselNum="option.series[0].data.length"
    />
  </BasicCard>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, reactive } from 'vue';
import { storeToRefs } from "pinia";
// store
import useDataScreen from "@/store/dataScreen";
import 'echarts-gl'

const dataScreenStore = useDataScreen();
// 解构
const { td3Map: map} = storeToRefs(dataScreenStore);

// X - 轮次
const rounds = ref<string[]>([]);
// Y - 设备数量
const count = ["10", "20", "40", "60", "80", "100"];
// 对应map映射
const mapKeys = ['accuracy10_NoLSTM', 'accuracy20_NoLSTM', 'accuracy40_NoLSTM', 'accuracy60_NoLSTM', 'accuracy80_NoLSTM', 'accuracy100_NoLSTM'] 
// Z - 二维数组
const dataTA = reactive([]);

let option = reactive({
  tooltip: {
    show: true
  },
  visualMap: {
    max: 1,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
  xAxis3D: {
    type: 'category',
    data: rounds.value,
    name: 'X-轮次',
    nameTextStyle: {
        color: '#fff'
    },
    axisLine: {
        lineStyle: {
            color: '#fff',  //坐标轴的颜色
        },
    },
  },
  yAxis3D: {
    type: 'category',
    data: count,
    name: 'Y-设备台数',
    width: 100,
    nameTextStyle: {
      color: '#fff'
    },
    axisLine: {
      lineStyle: {
        color: '#fff',  //坐标轴的颜色
      }
    }
  },
  zAxis3D: {
    type: 'value',
    nameTextStyle: {
      color: '#fff'
    },
    axisLine: {
        lineStyle: {
            color: '#fff',  //坐标轴的颜色
        },
    },
  },
  grid3D: {
    boxWidth: 200,
    boxDepth: 80,
    viewControl: {
      // projection: 'orthographic'
    },
    light: {
      main: {
        intensity: 1.2,
        shadow: true
      },
      ambient: {
        intensity: 0.3
      }
    }
  },
  series: [
    {
      type: 'bar3D',
      data: dataTA.map(function(item) {
        return {
            value: [item[1], item[0], item[2]]
        };
      }),
      shading: 'lambert',
      label: {
        fontSize: 16,
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20,
          color: '#900'
        },
        itemStyle: {
          color: '#900'
        }
      }
    }
  ]
}); 

const initData = () => {
    // console.log('map.value', map.value)
    // const len = map.value.get('accuracy10_NoLSTM').length; // 1000
    const len = 200;

    for(let i = 1; i <= len; i++) {
        rounds.value.push(i.toString());
    }

    for(let i = 0; i < mapKeys.length; i++) {
        // 二位数组最外层
        const getKey = mapKeys[i];
        const targetArr = map.value.get(getKey);
        
        for(let j = 0; j < len; j++) {
            // (y, x, z)
            // temp.push([i, j, targetArr[j]]);
            // dataTA.push(temp);

            dataTA.push([i, j, targetArr[j]]);
        }
    }
    // console.log('dataTA', dataTA)
    option.series[0].data = dataTA.map((item) => {
        return {
            value: [item[1], item[0], item[2]]
        };
    })
    // console.log('option.series[0].data', option.series[0].data)
    // console.log('count', count)
    // console.log('rounds.value', rounds.value)
    // console.log('dataTA', dataTA)
}

let isLoading = ref(true);
onMounted(() => {
  setTimeout(() => {
    initData()
    isLoading.value = false;
  }, 5000)
});


</script>

<style scoped lang="scss"></style>
